import React, { useState, useEffect } from "react";
import { View, StyleSheet, FlatList } from "react-native";
import query from "../../api/query";
import AsyncStorage from "@react-native-async-storage/async-storage";
import NoData from "../../components/preAdmin/NoData";
import SampleVillageCard from "../../components/preAdmin/SampleVillageCard";
import LoadingBar from "../../components/InterView/LoadingBar";

const SampleVillage = () => {
  const [sampleVillage, setSampleVillage] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true);
        const token = await AsyncStorage.getItem("token");
        const result = await query.get("/sampleVillage/publish", {
          headers: { Authorization: token },
        });

        setSampleVillage(result.data.data);
      } catch (err) {
        console.log("初始化样本村出错", err);
      }
      setIsLoading(false);
    };
    fetchData();
  }, []);

  return (
    <View style={styles.container}>
      <LoadingBar visible={isLoading} />
      <FlatList
        data={sampleVillage}
        ListEmptyComponent={<NoData />}
        keyExtractor={(item, index) => {
          return index.toString(); //remember to use return when using {}bracket
        }}
        renderItem={({ item, index }) => (
          <SampleVillageCard item={item} index={index} isVisible={false} />
        )}
      />
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    height: "100%",
    backgroundColor: "#f5f5f5",
    padding: 10,
  },
  page: {
    margin: 16,
    flex: 1,
  },
  title: {
    fontSize: 20,
    textAlign: "center",
  },
  time: {
    textAlign: "right",
    fontSize: 12,
    marginRight: 16,
    color: "#5a5a5a",
  },

  card: {
    backgroundColor: "#fff",
    borderRadius: 2,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 4,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
    padding: 10,
    marginVertical: 5,
  },
  top: {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 5,
  },
  middle: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop: 5,
    marginBottom: 5,
  },
  middleText: {
    fontSize: 16,
    // fontWeight: "bold",
    color: "#2b2b2b",
  },
  bottom: {
    flexDirection: "row",
    justifyContent: "flex-end",
    margin: 5,
    marginTop: 10,
  },
  tag: {
    backgroundColor: "#8ABAFF",
    padding: 2,
    paddingLeft: 4,
    paddingRight: 4,
    borderRadius: 5,
    marginRight: 5,
  },
  tagText: {
    color: "#fff",
    fontSize: 14,
  },
});

export default SampleVillage;
